Theme: Inline values for primitive tokens in CSS output #72890
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aduth
added
[Type] Performance
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: -8.5 kB (-0.35%) Total Size: 2.41 MB
ℹ️ View Unchanged
|
Merged
|
Flaky tests detected in 9b888e1. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/19270841406
|
aduth
force-pushed
the
improve/theme-build-inline-alias-values
branch
from
2ada354 to
9128c16
Compare
aduth
commented
Nov 6, 2025
Member
Author
|
@jsnajdr With what you're exploring in #73004 (comment) about limiting which colors we generate, I wonder if anything here could potentially lend to similar optimizations? What I like about this approach is that the |
Member
Every color generated in a ramp is used for two purposes:
Should even an unused color trigger seed adjustments? There are two possible answers:
|
jsnajdr
approved these changes
Nov 10, 2025
Member
jsnajdr
left a comment
jsnajdr
left a comment
There was a problem hiding this comment.
I finally took this PR for a test drive and it looks good, let's merge it 
aduth
commented
Nov 10, 2025
aduth
force-pushed
the
improve/theme-build-inline-alias-values
branch
from
1993b8a to
9b888e1
Compare
Member
Author
This was referenced Nov 12, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Builds on #72305
Updates theme package to avoid emitting CSS properties for primitive design tokens.
Why?
packages/theme/src/prebuilt/css/design-tokens.css)useThemeProviderStylesHow?
For compile-time build, the changes include a new Terrazzo plugin that match a given token ID by RegExp pattern and inline its value to anywhere that token ID is referenced as an alias (i.e. semantic tokens).
The runtime theming is a bit more challenging, since we relied on this aliasing to allow us to override primitive CSS properties and allow those changes to cascade to any semantic CSS properties. To maintain this behavior, the plugin emits a mapping of matched tokens to tokens which alias it, so that the runtime theme provider can override the semantic CSS properties associated with the color ramp (primitive) tokens.
This is what could also enable further performance enhancements, since using a file like this could allow us to generate color ramps based exclusively on primitive values which are actually referenced by a semantic token.
Testing Instructions
Validate no regressions in behavior of behavior of theme provider:
npm run storybook:startVerify that building theme package succeeds and produces no local changes:
npm run --workspace @wordpress/theme buildgit status